<template>
	<view class="">
		<!-- 头部 -->
		<view class="diamondMall_head p20 flex-between flex1" :style="{ background: bg_color}">
			<view class="">
				<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
					@click="backmarket()"></image>
			</view>
			<view class="size-30 center" :style="{opacity:textcolor}">
					{{this.name}}
			</view>
			<view class="">
				<image class="ml-30" src='../../static/home/kongxin.png' mode="widthFix" style="width: 30rpx;"
					@click="backmarket()"></image>
			</view>
		</view>
		<view class="" style="position: relative;">
			<image src="../../static/home/detailbg.png" mode="widthFix"
				style="width: 100%;position: absolute;z-index: -1;"></image>
			<view class="detailBrandside_top">
				<view class="detailBrandside_title" style="text-align: center;color:#F19E7E;">
					{{this.name}}
				</view>
				<view class="detailBrandside_text">
					<view class="">

					</view>
					<view class="">
						天衍是专业的一站式数字藏品电商平台,由一支在业内已积累丰富经验的资深团队管理运营。天衍致力于构建从创作者发掘、内容孵化、IP价值发现到应用场景运营的完整业务生态，平台将围绕中国传统文化与现当代优秀文创内容，建立数字营销、IP孵化、创作者扶持、元宇宙应用等完整内容生态闭环的链条打造,着重围绕中国传统文化的传承与传播不断发力，讲好中国故事,为国内市场持续输出优质的具有文化价值的薇品内容。
					</view>
					<view class="">
						天衍底层区块链技术采用BSN-文昌链，是由国家信息中心、中国银联、中国移动等联合发起合法合规可监管、具备全生态商业服务能力的开放联盟链,在性能、安全可靠性、认证及权限、运维监控等方面具备极高优势。
					</view>
				</view>
			</view>
			<view class="">
			</view>
			<!-- <view class="" style="height: 800rpx;"></view> -->
		</view>
		<view class="detailBrandside_bottom">
			<view class="detailBrandside" v-for="item in infoarr " style="">
				<view class="detailBrandside_box" style="" @click="handelgoodsCategoryDetail(item)">
					<view class="detailBrandside_box_top" style="">
						<image :src="item.image" class="detailBrandside_image" mode=""></image>
					</view>
					<view class="detailBrandside_bottom_text" style="">
						<image class="detailBrandside_bottom_bg" src="../../static/home/detailmengban.png" mode="">
						</image>
						<view class="" style="padding: 20rpx;font-size: 28rpx;">
							<view class="">
								{{item.name}}
							</view>
							<view class="" style="float: right;font-size: 28rpx;">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				id:'',
				textcolor: '0',
				bg_color: '',
				infoarr: [],
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.goods_category_id=options.goods_category_id
			this.$http('api/goods/goodsList', {
		       goods_category_id:this.goods_category_id
			}).then(res => {
				console.log(res.data);
				this.info = res;
				this.infoarr = JSON.parse(JSON.stringify(this.info.data))
				this.infoarr = res.data
				console.log(this.infoarr);
			}),
			this.$http('api/goods/goodsCategoryDetail', {
				id: this.goods_category_id
			}).then(res => {
				console.log(res);
				this.name=res.name
				console.log(this.name);
	 
			})
		},
		onShow() {

		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		methods: {
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/homeDetails'
				})
			},
			handelgoodsCategoryDetail(item){
				console.log(item.id);
				this.id=item.id
				uni.navigateTo({
						url: '/pages/home/homeDetails?id='+item.id
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}

	.detailBrandside_bottom_bg {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.detailBrandside_bottom_text {
		width: 100%;
		height: 350rpx;
		position: relative;
	}

	.detailBrandside_image {
		width: 100%;
		height: 100%;
		border-radius: 24rpx 24rpx 0 0;
	}

	.detailBrandside_bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 220rpx 0 0 10rpx;
	}

	.detailBrandside_title {
		color: rgb(241, 158, 126);
		line-height: 480rpx;
		font-size: 44rpx;
	}

	.detailBrandside_text {
		width: 600rpx;
		height: 304rpx;
		letter-spacing: 1rpx;
		text-indent: 1rem;
		margin: -200rpx 0px 0px 80rpx;
	}

	.detailBrandside_top {
		// text-align: center;
		// line-height: 540rpx;
		color: #FFF;
		font-size: 24rpx;
	}

	.detailBrandside {
		padding: 14rpx;
		display: flex;
		justify-content: space-around;

	}

	.detailBrandside_box {
		width: 340rpx;
		height: 400rpx;
		box-shadow: 0px 0px 16rpx 0px gainsboro;
		border-radius: 22rpx;

	}

	.detailBrandside_box_top {
		width: 100%;
		height: 73%;
		// background-color: antiquewhite;
	}
</style>
